<template>
	<div class="app-content addTask">
		<block v-if="$util.shieldReview()">
			<p class="title">朋友圈推广</p>
			<div class="textarea_wrap">
				<textarea v-model="form.recommend" placeholder="说一说为什么推荐它...." placeholder-class="ph" :maxlength="200"></textarea>
				<div class="count">{{currentNum}}/200</div>
			</div>
			<div class="generalize-content">
				<!-- 图片上传 -->

				<uploader :max-count="maxCount" :imgList.sync="imgList" :size="170" />
				<div class="input_wrap">
					<div class="input_box">
						<div class="label">链接</div>
						<input type="text" placeholder="请输入链接" v-model="form.link" />
					</div>
				</div>
			</div>

			<div class="input_wrap">
				<div class="input_box" @click="isShowStaff">
					<div class="left">
						<div class="label">接收人</div>
						<span class="content">{{`已选择${form.user_id_arr.length}人`}}</span>
					</div>
					<view class="iconfont iconjiantou"></view>
				</div>
				<div class="input_box" @click="showDateTime">
					<div class="left">
						<div class="label">截止时间</div>
						<span class="content">{{form.end_time ? form.end_time : '请选择'}}</span>
					</div>
					<view class="iconfont iconjiantou"></view>
				</div>
				<picker mode="selector" :range="remindTimeList" :value="index" @change="remindTimeChange" range-key="text">
					<div class="input_box">
						<div class="left">
							<div class="label">提醒</div>
							<span class="content">{{remindTimeList[index].text}}</span>
						</div>
						<view class="iconfont iconjiantou"></view>
					</div>
				</picker>
			</div>

			<div class="generalize-save" @click="pushTeam">保存</div>

			<open-VIP :show.sync="showVipPop" />
			<date-time-picker ref="dateTime" @submit="dateTimeSubmit" color="#FFD11A" />
		</block>
		<!-- <van-cell-group>
            <van-cell title="接收人" is-link :value="`已选择${form.user_id_arr.length}人`" @click="selStaffFn" />
            <van-cell title="截止时间" is-link :value="form.end_time?form.end_time:'请选择截止时间'" @click="dateShow = true" />
            <van-cell title="提醒" is-link :value="warn" @click="isTipsType=true" />
        </van-cell-group>
        <div class="generalize-save" @click="save">发送</div>
        <van-popup v-model="dateShow" position="bottom">
            <van-datetime-picker v-model="end_time" type="datetime" :formatter="formatter" @confirm="dateConfirm" @cancel="dateCancel" />
        </van-popup>
        <van-popup v-model="isTipsType" position="bottom">
            <van-picker show-toolbar :default-index="0" title="请选择提醒时间" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
        <select-staff type="team" @affirm="affirm" get-container="body" tips="去添加员工" v-model="isSelect" />
		<open-VIP :show.sync="showVipPop"/>-->
	</div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { pushTeamNum } from '@/api/getGuest/index'
import itemLink from './components/itemLink'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import uniPopup from '@/components/uni-popup/uni-popup'
import dateTimePicker from '@/components/simple-datetime-picker'
import qs from 'qs'
import uploader from '@/components/App_uploader'
import openVIP from '@/pages/components/dialog/openVIP'
import { upLoadImg } from '@/utils/common'

export default {
	name: 'addTask',
	components: {
		itemLink,
		AppWrapperEmpty,
		uploader,
		openVIP,
		uniPopup,
		dateTimePicker
	},
	data() {
		return {
			showVipPop: false,
			remindTimeShow: false,
			dateTimeShow: false,
			option: {},
			index: 0,
			remindTimeList: [{ text: '截止前15分钟', id: 2 }, { text: '不提醒', id: 1 }, { text: '截止前1小时', id: 3 }, { text: '截止前3小时', id: 4 }, { text: '截止前1天', id: 5 }],
			maxCount: 8,
			notice: true,
			imgList: [],
			form: {
				recommend: '', // 必填
				tips_type: 2, // 必填
				end_time: '', // 必填
				user_id_arr: [], // 必填
				link: '', // 非必填
				imglist: [] // 非必填
			}
		}
	},
	onLoad(option) {
		console.log(option, 'addTask option')

		if (option.staff) {
			this.form.user_id_arr = decodeURIComponent(option.staff).split(',')
		}
		// uni.showToast({
		// 	title: decodeURIComponent(option.staff),
		// 	icon: 'none',
		// 	duration: 3000
		// })
		let formData = option.formData
		if (formData) {
			console.log(decodeURIComponent(option.formData), 'decodeURIComponent(option.formData)')
			formData = JSON.parse(decodeURIComponent(option.formData))
			const { recommend, end_time, link, index } = formData
			this.form.recommend = recommend
			this.form.end_time = end_time
			this.form.link = link
			this.index = index
		}
		this.option = option
		this.option.title = decodeURIComponent(option.title)
		this.option.imgUrl = decodeURIComponent(option.imgUrl)
		if (decodeURIComponent(option.fromPage) == 'addTask') {
			this.imgList = this.$store.state.user.taskImgList
		}
	},
	computed: {
		...mapState({
			isVip: state => (state.user.user ? state.user.user.vip_level > 0 : false),
			user_id_arr: state => state.user.staffIDList
		}),
		currentNum() {
			return this.form.recommend.length
		}
	},
	methods: {
		...mapActions(['setTaskImgList']),
		dateTimeSubmit(e) {
			this.form.end_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
		},
		showDateTime() {
			this.$refs.dateTime.show()
		},
		isShowStaff() {
			if (!this.isVip) {
				this.showVipPop = true
				return
			}
			const { recommend, end_time, user_id_arr, link } = this.form
			const formData = {
				recommend: recommend,
				link: link,
				index: this.index,
				end_time: end_time
			}
			if (user_id_arr.length) {
				formData.user_id_str = user_id_arr.join(',')
			}
			this.imgList.length && this.setTaskImgList(this.imgList)
			const params = {
				filter: 'team',
				tips: '去添加员工',
				isSelect: 'true',
				fromPage: 'addTask',
				formData: JSON.stringify(formData)
			}

			uni.navigateTo({
				url: `/pages/admin/staffManage/selectStaff?${qs.stringify(params)}`
			})
		},
		remindTimeChange(e) {
			this.index = e.target.value
		},
		pushTeam() {
			// if (!this.$isUrl(this.form.link)) {
			// 	this.$toast('请输入正确的链接地址! ')
			// 	return false
			// }
			if (!this.form.user_id_arr.length) {
				uni.showToast({
					title: '请选择员工',
					icon: 'none'
				})
				return
			}
			this.form.tips_type = this.remindTimeList[this.index].id
			if (this.imgList.length) {
				this.form.imglist = this.imgList
			}
			let flag = true
			Object.keys(this.form).forEach(item => {
				if (item != 'imglist' && item != 'link') {
					if (Array.isArray(this.form[item])) {
						if (!this.form[item].length) {
							flag = false
						}
					} else if (!this.form[item]) {
						flag = false
					}
				}
			})
			if (!flag) {
				uni.showToast({
					title: '请填写相关信息',
					icon: 'none'
				})
				return
			}
			const params = {
				...this.form,
				type: 4,
				multi_id: 0,
				user_id_arr: this.user_id_arr
			}
			if (this.option.from_origin) {
				params.from_origin = this.option.from_origin
			}
			pushTeamNum(params).then(res => {
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/getGuest/myTask`
					})
				}, 500)
			})
		}
	}
}
</script>

<style lang="scss" scope>
	.textarea_wrap textarea {
		box-sizing: border-box;
		border-bottom: 0.5px solid rgba(238, 238, 238, 1);
		font-size: 26px;
	}
	.title {
		padding: 29px 30px 21px;
		font-size: 28px;
		color: rgba(102, 102, 102, 1);
	}
	.generalize-content {
		background-color: #ffffff;
		margin-bottom: 20px;
		padding-top: 20px;
		// padding: 30px;
	}
	.generalize-save {
		width: 690px;
		height: 90px;
		background: rgba(255, 209, 26, 1);
		border-radius: 45px;
		margin: 60px auto 40px;
		text-align: center;
		line-height: 88px;
		color: #3a1b04;
		font-size: 26px;
	}
	.input_wrap {
		padding-left: 30px;
		background-color: #fff;
		border-top: 0.5px solid rgba(238, 238, 238, 1);
		.input_box {
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 30px;
			.label {
				width: 211px;
				font-size: 28px;
				color: rgba(102, 102, 102, 1);
			}
			input {
				flex: 1;
				height: 100%;
				border: 0 none;
				line-height: 55px;
				font-size: 26px;
			}
			.left {
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 28px;

				.content {
					font-size: 28px;
					color: rgba(51, 51, 51, 1);
					font-size: 26px;
				}
			}
			.iconjiantou {
				color: rgba(204, 204, 204, 1);
			}
		}
	}
</style>
